<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <#include "/pubHeadStyleTree.html">
    </head>
    <body>
        <style>
            .table-top-filter .filter-list {
                width: 76%;
                padding-top: 4px;
            }

            .center .layui-table-tool-temp {
                padding-right: 70px;
            }
        </style>
        <script type="text/html" id="headerManagementRole">
            <div class="layui-btn-container" style="float: right;margin-top: 4px">
                <a class="layui-btn layui-btn-sm" lay-event="query">
                    <i class="layui-icon layui-icon-search"></i>
                    <span>查询</span>
                </a>
            </div>
            <form class="layui-form" lay-filter="queryForm" style="margin-top:10px">
                <div class="table-top-filter">
                    <div class="table-filter-alone">
                        <label class="layui-form-label" style="width: 58px">角色</label>
                        <input type="hidden" name="selectRole" value="">
                        <input style="width:180px" type="text" class="layui-input filter-value" name="Q_roleName_SL"
                               placeholder="角色"/>
                    </div>
                </div>
            </form>
        </script>
        <div name="roleSelectorDiv">
            <div class="left">
                <span style="background: #e6e6e6;width: 100%;height: 30px;line-height: 30px;padding-left:12px;display: inline-block;">按组织查找</span>
                <ul id="orgTree" class="ztree"></ul>
            </div>
            <div class="center">
                <div class="filter-table" style="position: relative;">
                    <table class="layui-hide" id="roleListTable" lay-filter="roleListTable"></table>
                </div>
            </div>
        </div>
        <script>
            var selectRoleId = '${selectRoleId}';
            var radioRole;
            layui.config({
                base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
            }).extend({
                index: 'index' //主入口模块
            }).use(['index', 'table', 'layer', 'treeSelect', 'form', 'laydate', 'totalFilter', 'setter', 'commons', 'common'], function () {
                var setter = layui.setter
                    , common = layui.common
                    , table = layui.table
                    , commons = layui.commons
                    , totalFilter = layui.totalFilter;
                //选中的组织
                var selectOrgId;
                //已选择的角色
                var selectRole = '';

                //加载组织树
                loadOrgTree();

                function loadOrgTree() {
                    $.ajax({
                        url: serverPath.systemPath + setter.sysLinkPath + "sysOrg/list",
                        type: "get",
                        contentType: 'application/json',
                        dataType: 'json',
                        success: function (data) {
                            if (commons._filterRecord(data)) {
                                var zNodes = data.data;
                                var setting = {
                                    view: {
                                        showLine: false,
                                        nameIsHTML: true
                                    },
                                    data: {
                                        simpleData: {
                                            enable: true,
                                            idKey:"orgId",
                                            pIdKey:"orgSupId"
                                        }
                                    },
                                    callback: {
                                        onClick: onClickOrgTree
                                    }
                                };
                                $.fn.zTree.init($('#orgTree'), setting, zNodes);
                            } else {
                                window.parent.layer.alert(data.msg);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
                        },
                    });
                }

                //组织数点击事件
                function onClickOrgTree(event, treeId, treeNode, clickFlag) {
                    selectOrgId = treeNode.orgId;
                    common.tableConditionRender("roleListTable", "queryForm", {where: {"orgId": treeNode.orgId}}, true);
                }

                table.render({
                    elem: '#roleListTable',
                    method: 'get',
                    url: serverPath.systemPath + setter.sysLinkPath + 'sysRole/list',
                    page: true,
                    height: 'full-4',
                    defaultToolbar: [],
                    where: {},
                    toolbar: '#headerManagementRole',
                    cols: [
                        [
                            {type: 'radio'},
                            {field: 'roleId', title: 'ID', sort: true, hide: true},
                            {field: 'roleName', title: '角色', width: 160, sort: false},
                            {field: 'systemName', width: 230, title: '所属组织', sort: false}
                        ]
                    ],
                    parseData: function (res) {
                        var _data = res.data;
                        if (_data.length > 0) {
                            for (var i = 0; i < _data.length; i++) {
                                var _d = _data[i];
                                if (_d.roleId == selectRoleId) {
                                    _d.LAY_CHECKED = true;
                                    radioRole = _d;
                                }
                            }
                        }
                    }
                });
                totalFilter.init('roleListTable');
                table.on('toolbar(roleListTable)', function (obj) {
                    switch (obj.event) {
                        case 'query':
                            console.log(selectOrgId)
                            common.tableConditionRender("roleListTable", "queryForm", {where: {"orgId": selectOrgId}}, false);
                            break;
                    }
                });

                $(document).on("click", ".center .layui-table-body table.layui-table tbody tr", function () {
                    var obj = event ? event.target : event.srcElement;
                    var tag = obj.tagName;
                    var radio = $(this).find("td div.laytable-cell-radio div.layui-form-radio I");
                    if (radio.length != 0) {
                        if (tag == 'DIV') {
                            radio.click();
                        }
                    }
                });
                $(document).on("click", ".center td div.laytable-cell-radio div.layui-form-radio", function (e) {
                    e.stopPropagation();
                });

                table.on('radio(roleListTable)', function (obj) {
                    var data = obj.data;
                    selectRole = data;
                });

                //保存
                window.saveData = function (index) {
                    $("input[name=selectRole]").val(JSON.stringify(selectRole));
                };

                //撤销
                window.cancelData = function (index) {
                    selectRoleId = null;
                    table.reload('roleListTable');
                };

                //全部取消
                $(".bottom .cancelData").click(function () {
                    layui.selectRole = radioRole;
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                });
            });
        </script>
        <style>
            .left {
                width: 26%;
                display: inline-block;
                float: left;
            }

            .center {
                width: 69%;
                display: inline-block;
                margin-left: 15px;
                float: left;
            }

            ul.ztree {
                background: #fff;
                width: 100%;
                height: 473px;
                overflow: auto;
            }

            .filter-table .layui-form.layui-border-box.layui-table-view {
                position: absolute;
                margin: 0
            }

            .center .layui-table-page {
                padding-left: 2px;
                padding-right: 2px;
                width: 495px; /*表格分页底部  */
            }

            .contentDivs td {
                height: auto;
                padding-right: 30px;
            }

            .contentDivs span {
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
            }

            .center .layui-table-view .layui-table {
                width: 100%; /*表格主体宽度*/
            }
        </style>
    </body>
</html>